<template>
	<view>
		<!-- 教练详情 -->
		<view class="list">
			<view v-for="(item, index) in teachersList" :key="index" class="borderBottom1">
				<view class="teachersDetails " style="position: relative;" @click="onRadioClick(item, index)">
					<evan-radio ref="listRadio" style="margin-right: 20rpx;" v-model="selectRadio" :label="item.id"></evan-radio>
					<view class="teacherImg"><image :src="item.image ? item.image : ''" mode=""></image></view>

					<view class="introduce">
						<view class="teacherName">
							<text>{{ item.name }}</text>
							<text>{{ item.drive_age ? '驾龄' + item.drive_age + '年' : '' }}</text>
						</view>

						<uni-rate size="20" disabled="true" :value="item.star"></uni-rate>

						<view class="skillList">
							<text class="characteristic" v-for="(ele, index1) in item.tags" :key="index1">{{ ele }}</text>
						</view>
					</view>

					<!-- <view class="people" style="position: absolute;right: 0;top: 50%;height: 40rpx;margin-top: -20rpx;">已有8人预约</view> -->
				</view>
			</view>
		</view>
		<view class="loading">{{loadingText}}</view>
	</view>
</template>

<script>
import { wxindex } from '@/api/user/index/index.js';
export default {
	data() {
		return {
			loadingText: '加载中...', //加载状态
			teachersList: [
				// {
				// 	img: '../../static/img/index/12.jpg',
				// 	name: '张三',
				// 	age: '驾龄20年',
				// 	star: 5,
				// 	state: 0,
				// 	id: 1,
				// 	skill: ['专车接送', '一对一教学', '一人一车']
				// },
			],
			selectRadio: '',
			page:1,
		};
	},
	async onLoad(options) {
		let res = await wxindex(1,options.type);
		this.getTeacherList(res)
	},
	// 监听触底
	onReachBottom() {
		this.loadMore()
	},
	methods: {
		async loadMore(){
			let res = await wxindex(++this.page);
			if (res.data.coach.data.length == 0) {
				this.loadingText = "没有数据了！";
			} else if (res.data.coach.data.length < 10) {
				this.loadingText = "没有数据了！";
			} else {
				this.loadingText = "加载中";
			}
			this.getTeacherList(res)
		},
		getTeacherList(res){
			for (let i = 0; i < res.data.coach.data.length; i++) {
				res.data.coach.data[i].tags = res.data.coach.data[i].tags.split(',');
			}
			
			if (this.page == 1) {
				this.teachersList = res.data.coach.data;
			} else {
				this.teachersList = this.teachersList.concat(res.data.coach.data)
			}
		},
		onRadioClick(item, index) {
			this.$refs.listRadio[index].select();
			uni.$emit('fire', {
				teacher: item
			});
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss">
@import '@/pages/tabbar/index/css/index.scss';

.people {
	margin-left: 50rpx;
	font-size: 26rpx;
	color: #999999;
	position: relative;
	top: -34rpx;
}
</style>
